<template>
    <view class="dui-tab-wrapper" :class="{ 'flex-between-mode': flexBetweenMode }" :style="tabWrapperStyle">
        <view
            class="dui-tab-item"
            :class="{
                active: menuActiveIndex == index,
                prev: index == menuActiveIndex - 1,
                next: index == menuActiveIndex + 1,
            }"
            :style="[itemStyle(index)]"
            v-for="(item, index) in tabList"
            :key="index"
            @click="menuClick(item, index)"
        >
            <text>{{ item.name }}</text>
            <view class="dui-el dui-lel" :style="{ backgroundColor }"
                ><text class="dui-cycle" :style="{ backgroundColor: activedBackgroundColor }"></text
            ></view>
            <view class="dui-el dui-rel" :style="{ backgroundColor }"
                ><text class="dui-cycle" :style="{ backgroundColor: activedBackgroundColor }"></text
            ></view>
        </view>
    </view>
</template>

<script>
export default {
    emits: ["change", "update:modelValue", "input"],
    props: {
        tabList: Array,
        color: {
            type: String,
            default: "#333",
        },
        flexBetweenMode: {
            type: Boolean,
            default: false,
        },
        activedColor: {
            type: String,
            default: "#f40",
        },
        backgroundColor: {
            type: String,
            default: "#f2f2f2",
        },
        activedBackgroundColor: {
            type: String,
            default: "#fff",
        },
        // #ifdef VUE2
        value: Number,
        // #endif
        // #ifdef VUE3
        modelValue: Number,
        // #endif
    },
    data() {
        return {};
    },
    computed: {
        menuActiveIndex: {
            get() {
                let index = 0;
                // #ifdef VUE2
                index = this.value;
                // #endif
                // #ifdef VUE3
                index = this.modelValue;
                // #endif
                return index;
            },
            set(val) {
                // #ifdef VUE2
                this.$emit("input", val);
                // #endif
                // #ifdef VUE3
                this.$emit("update:modelValue", val);
                // #endif
            },
        },
        tabWrapperStyle() {
            return {
                backgroundColor: this.activedBackgroundColor,
            };
        },
    },
    options: {
        styleIsolation: "shared",
    },
    methods: {
        itemStyle(index) {
            return {
                color: index == this.menuActiveIndex ? this.activedColor : this.color,
                backgroundColor: index == this.menuActiveIndex ? this.activedBackgroundColor : this.backgroundColor,
            };
        },
        menuClick(item, index) {
            this.menuActiveIndex = index;
            this.$emit("change", {
                index,
                ...item,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.dui-tab-wrapper {
    white-space: nowrap;
    overflow-x: auto;
    border-radius: 10rpx;
    background-color: #fff;
    &::-webkit-scrollbar {
        display: none;
    }
    &.flex-between-mode {
        display: flex;
        align-items: center;
        width: 100%;
        .dui-tab-item {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex: 1;
        }
    }
    font-size: 0;
    .dui-tab-item {
        display: inline-block;
        padding: 20rpx 45rpx;
        font-size: 27rpx;
        overflow: hidden;
        background-color: #f2f2f2;
        &:first-child.active .dui-lel {
            display: none;
        }
        &:last-child.active .dui-rel {
            display: none;
        }
        &.active {
            position: relative;
            font-weight: bold;
            color: #0091ff;
            background-color: #fff;
            .dui-el {
                position: absolute;
                top: 0;
                width: 29rpx;
                height: 29rpx;
                background-color: #f2f2f2;
                overflow: hidden;
                .dui-cycle {
                    position: absolute;
                    top: 0;
                    width: 58rpx;
                    height: 58rpx;
                    border-radius: 50%;
                    z-index: 1;
                    background-color: #fff;
                }
                &.dui-lel {
                    left: 0;
                    .dui-cycle {
                        left: 0;
                    }
                }
                &.dui-rel {
                    right: 0;
                    .dui-cycle {
                        right: 0;
                    }
                }
            }
        }
        &.prev {
            border-radius: 0 0 30rpx 0;
        }
        &.next {
            border-radius: 0 0 0 30rpx;
        }
    }
}
</style>
